<script setup lang="ts">
import { ref, onMounted } from 'vue'
import SearchPanel from '@/components/SearchPanel/SearchPanel.vue'
import optionsTestData from '@/components/SearchPanel/optionsTestData'
import pdfPreviewByPlugin from '@/components/pdfPreviewByPlugin.vue'
import wsl1 from '@/assets/imgs/wsl1.webp'
import barcode from '@/components/barcode.vue'
import qrcode from '@/components/qrcode.vue'
import richTextEditor from '@/components/richTextEditor/Wangeditor.vue';
import dragBetweenListTest from '@/components/dragBetweenListTest.vue'
import copyPaste from '@/components/copyPaste.vue'
import Test from '@/components/test.vue'

onMounted(() => {
	//window.print()
})


const printConfig = {
	id: 'homePage', //这里的id就是上面我们的打印区域id，实现指哪打哪
	popTitle: '配置页眉标题', // 打印配置页上方的标题
	//extraHead: '', // 最上方的头部文字，附加在head标签上的额外标签，使用逗号分割
	preview: false, // 是否启动预览模式，默认是false
	previewTitle: '预览的标题', // 打印预览的标题
	previewPrintBtnLabel: '预览结束，开始打印', // 打印预览的标题下方的按钮文本，点击可进入打印
	zIndex: 20002, // 预览窗口的z-index，默认是20002，最好比默认值更高
	previewBeforeOpenCallback() {
		//console.log('正在加载预览窗口！')
	}, // 预览窗口打开之前的callback
	previewOpenCallback() {
		//console.log('已经加载完预览窗口，预览打开了！')
	}, // 预览窗口打开时的callback
	beforeOpenCallback() {
		//console.log('开始打印之前！')
	}, // 开始打印之前的callback
	openCallback() {
		//console.log('执行打印了！')
	}, // 调用打印时的callback
	closeCallback() {
		//console.log('关闭了打印工具！')
	}, // 关闭打印的callback(无法区分确认or取消)
	clickMounted() {
		//console.log('点击v-print绑定的按钮了！')
	},
}

</script>

<template>
	<!-- home -->
	<div class="home" id="homePage">
		<SearchPanel :options="optionsTestData" />
		<pdfPreviewByPlugin/>
		<a-button type="primary" v-print="1?printConfig:{id:'homePage'}" style="margin-right: 5px">打印当前页内容</a-button>
		<barcode
			:init="true"
			info="hhh"
			:options="{
				height: 80,
				width: 2,
				displayValue: false,
			}"
		/>
		<barcode
			:init="true"
			info="lll"
			:options="{
				height: 80,
				width: 2,
				displayValue: false,
			}"
		/>
		<qrcode />
		<qrcode :logo="wsl1" />
		<richTextEditor />
	  <dragBetweenListTest/>
    <copyPaste/>

		<Test/>	
    
    
	</div>
</template>

<style scoped>
.home{
	margin-bottom: 50px;
}
</style>
